<template>
    <!-- 添加-->
    <el-dialog :title="title" :visible.sync="open" width="45%" append-to-body :before-close="closeDelDialog">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入名称" maxlength="30" />
            </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="责任者" prop="zrz">
                <el-input v-model="form.zrz" placeholder="请输入责任者" maxlength="30" />
            </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="日期" prop="rq">
                <el-date-picker v-model="form.rq" type="date" placeholder="请选择日期" format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
              </el-col>
            </el-row>
           <el-row>
             <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入备注" />
            </el-form-item>
             </el-col>
           </el-row>

           <el-row>
             <el-col :span="24">
                <el-form-item label="文件">
                <zdyfileUpload :uploadData="uploadData" :uploadList="tableFlieData" :uploadFileUrl="uploadFileUrl"
                    :renyuanOptions="renyuanOptions" @handleUploadSuccess="handleUploadSuccess">
                </zdyfileUpload>
            </el-form-item>
             </el-col>
           </el-row>


            <el-form-item label="文件列表">
                <el-table :data="tableFlieData" height="250" border style="width:100%;" header-align="center">
                    <el-table-column type="index" label="序号" align="center" header-align="center">
                    </el-table-column>
                    <el-table-column prop="fileName" label="附件名称" align="center" header-align="center">
                    </el-table-column>
                    <el-table-column prop="address" label="操作" align="center" header-align="center">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-download" plain size="mini"
                                @click="onClickDownLoadTap(scope.row)">下载</el-button>
                            <el-button type="text" plain icon="el-icon-delete" size="mini"
                                @click="onClickDelTap(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>
        </el-form>


        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitTrreForm">确 定</el-button>
            <el-button @click="closeDelDialog">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
  import {getYqdaId} from "@/api/archive/fileCollection/offlinReception.js";
  import zdyfileUpload from "@/components/FileUpload/zdyIndex.vue" //文件上传
  import {
    deletefile,
    qzjfileList,
    qzjInfoAdd,
    qzjInfoDeilte,
    qzjInfoDeit
  } from "@/api/archive/application/generalJuan.js"

  export default {
    components: { zdyfileUpload },
    props: ['open', 'rowData','infoData'],
    data() {
        return {
            uploadFileUrl: process.env.VUE_APP_BASE_API + "/archive/qzjfile/upload",
            uploadData: undefined,//上传携带的参数
            tableFlieData: [],//文件列表数据
            renyuanOptions: [],//密级下拉列表
            title: "",
            form: {
                remark: undefined,
                title: undefined,
                zrz:undefined,
                rq:undefined
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
                zrz: [
                    { required: true, message: '请输入责任者', trigger: 'blur' },
                ],
                rq: [
                    { required: true, message: '请选择日期', trigger: 'blur' },
                ],

            }
        }
    },
    watch: {
        rowData: {
            handler(val) {
                //
                // this.uploadData = {
                //     qzjId: val.id
                // }
            },
            deep: true,
            immediate: true
        },
        infoData:{
            handler(val) {
                console.log(val,"/quanzongjuan/generalJuan")


                if(val!=undefined&&val!="null"&&val!=""){
                  this.uploadData = {
                    qzjId: val.id
                  }
                    qzjInfoDeilte(val.id).then(res=>{
                        console.log(res)
                        this.form=res.data
                    })
                }else{
                  getYqdaId().then(res => {

                    this.uploadData = {
                      qzjId: res.data
                    }




                  })
                }
                this.qzjfileList();
            },
            deep: true,
            immediate: true
        }
    },

    created() {
        
    },
    methods: {
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },

        //保存
        submitTrreForm() {
            var that = this;

            this.form['treeId']=this.rowData.id;
            that.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.id != null) {
                        qzjInfoDeit(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.$emit("submitForm")
                        });
                    } else {
                        this.form['id']=this.uploadData.qzjId
                        qzjInfoAdd(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.$emit("submitForm")

                        });
                    }
                }
            })
        },

        //文件列表展示
        qzjfileList() {
            var that = this;
            qzjfileList(this.uploadData.qzjId).then(res => {
                this.tableFlieData = res.data;
                console.log(this.tableFlieData,"--------------------liu")
            })
        },
        handleUploadSuccess() {
          console.log("-------------------")
            this.qzjfileList();
        },
        /**
                * var data = 'aaa-bbb'
                   //截取符号前面部分
                   getCaption(data,0) //输出aaa
                   //截取符号后面部分
                   getCaption(data,1) //输出bbb
                */
        getCaption(obj, state) {
            var index = obj.lastIndexOf("\.");
            if (state == 0) {
                obj = obj.substring(0, index);
            } else {
                obj = obj.substring(index + 1, obj.length);
            }
            return obj;
        },
        //下载
        onClickDownLoadTap(row) {
            var that = this;
            console.log(this.getCaption(row.fileType, 1), row, "sdlkjfkl")
            var str = this.getCaption(row.fileType, 1)
            this.download('/archive/qzjfile/view/' + row.id, {
            }, `${new Date().getTime()}.${str}`)
        },

        //删除
        onClickDelTap(row) {
            var that = this;
            if (row.id != undefined) {
                this.$modal.confirm('删除后不可恢复,确定要删除当前' + row.fileName + '文件吗?').then(function () {
                    deletefile({
                        ids: row.id
                    }).then(res => {
                        if (res.code == "200") {
                            that.qzjfileList();
                            that.$modal.msgSuccess("删除成功");
                        }
                    });

                }).catch(() => { });
            } else {
                this.tableFlieData = [];
            }
        },
    }
}
</script>
<style lang="scss" scoped></style>
